﻿<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS3实现曲线阴影和翘边阴影</title>
    <style type="text/css">
        * {
            outline: 0;
            padding: 0;
            margin: 0;
            border: 0;
        }
        /*简易版reset*/

        ul {
            list-style: none;
        }
        /*取消列表样式*/


        p {
            font-size: 30px;
            text-align: center;
            font-weight: bold;
            margin: -30px 0 50px 0;
        }

        .wrap {
            width: 50%;
            height: auto;
            margin: 80px auto;
            background: #fff;
        }
            /*包块的宽高,背景色及居中对齐*/

            .wrap span {
                display: block;
                font-size: 30px;
                font-weight: bold;
                text-align: center;
                line-height: 50px;
                padding: 30px;
            }
        /*设置字体大小,对齐方式及行高(垂直居中)*/

        .effect {
            position: relative;
            -webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, .3), 0px 0px 40px rgba(0, 0, 0, .1) inset;
            -moz-box-shadow: 0px 1px 4px rgba(0, 0, 0, .3), 0px 0px 40px rgba(0, 0, 0, .1) inset;
            -ms-box-shadow: 0px 1px 4px rgba(0, 0, 0, .3), 0px 0px 40px rgba(0, 0, 0, .1) inset;
            -o-box-shadow: 0px 1px 4px rgba(0, 0, 0, .3), 0px 0px 40px rgba(0, 0, 0, .1) inset;
            box-shadow: 0px 1px 4px rgba(0, 0, 0, .3), 0px 0px 40px rgba(0, 0, 0, .1) inset;
        }
            /**
         * 设置盒子外阴影和内阴影
        -----------------------------------------------------------------------
          可以使用十六进制颜色,若是需要用到透明度,建议用rgba
            box-shadow:h-shadow v-shadow blur spread color inset
           必需：h-shadow(水平)，v-shadow（垂直）
           可选：blur（模糊距离），spread（阴影尺寸），color（阴影颜色），inset（内阴影）
           浏览器兼容：IE9+、FireFox4、Chrome、Opera、Safari5.1.1

           */

            .effect:after,
            .effect:before {
                position: absolute;
                content: '';
                top: 50%;
                bottom: 0;
                left: 30px;
                right: 30px;
                z-index: -1;
                -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .8);
                -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .8);
                -ms-box-shadow: 0 0 20px rgba(0, 0, 0, .8);
                -o-box-shadow: 0 0 20px rgba(0, 0, 0, .8);
                box-shadow: 0 0 20px rgba(0, 0, 0, .8);
                -webkit-border-radius: 100px/10px;
                -moz-border-radius: 100px/10px;
                -ms-border-radius: 100px/10px;
                -o-border-radius: 100px/10px;
                border-radius: 100px/10px;
            }
        /**
         * .追加盒子,产生曲线阴影的效果,应用after+before重叠阴影更加厚实,使用z-index调整位置
         -----------------------------------------
        :after 和 :before ，content添加内容，
        浏览器兼容：对于IE8及更早版本中的：after，必须声明<!DOCTYPE>

        border-radius:x/y(水平半径/垂直半径)
         */

        .box {
            width: 980px;
            height: auto;
            clear: both;
            overflow: hidden;
            margin: 20px auto;
        }
            /**
             * 主容器宽度固定,高度自适应..清除所有浮动且容器居中
             */

            .box li {
                position: relative;
                width: 300px;
                height: 300px;
                float: left;
                margin: 20px 10px;
                border: 2px solid #000;
                -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .7),0 0 60px rgba(0,0,0,.7) inset;
                -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, .7),0 0 60px rgba(0,0,0,.7) inset;
                -ms-box-shadow: 0 1px 4px rgba(0, 0, 0, .7),0 0 60px rgba(0,0,0,.7) inset;
                -o-box-shadow: 0 1px 4px rgba(0, 0, 0, .7),0 0 60px rgba(0,0,0,.7) inset;
                box-shadow: 0 1px 4px rgba(0, 0, 0, .7),0 0 60px rgba(0,0,0,.7) inset;
            }
            /**
             * width:(300+10*2+2*2)*3 = 972 <980
             * 增加阴影
             */

                .box li img {
                    display: block;
                    width: 290px;
                    height: 290px;
                    margin: 5px;
                }
                /**
                 * width:(290 + 5*2) = 300 == li.width
                 * height:(290+ 5*2) = 300 == li.height
                 */


                .box li:before {
                    position: absolute;
                    content: '';
                    width: 90%;
                    height: 80%;
                    left: 20px;
                    bottom: 13px;
                    z-index: -1;
                    -webkit-box-shadow: 0 8px 20px rgba(0,0,0,.6);
                    -moz-box-shadow: 0 8px 20px rgba(0,0,0,.6);
                    -ms-box-shadow: 0 8px 20px rgba(0,0,0,.6);
                    -o-box-shadow: 0 8px 20px rgba(0,0,0,.6);
                    box-shadow: 0 8px 20px rgba(0,0,0,.6);
                    -webkit-transform: skew(-8deg) rotate(-4deg);
                    -ms-transform: skew(-8deg) rotate(-4deg);
                    -o-transform: skew(-8deg) rotate(-4deg);
                    transform: skew(-8deg) rotate(-4deg);
                }

                .box li:after {
                    position: absolute;
                    content: '';
                    width: 90%;
                    height: 80%;
                    right: 20px;
                    bottom: 13px;
                    z-index: -2;
                    -webkit-box-shadow: 0 8px 20px rgba(0,0,0,.6);
                    -moz-box-shadow: 0 8px 20px rgba(0,0,0,.6);
                    -ms-box-shadow: 0 8px 20px rgba(0,0,0,.6);
                    -o-box-shadow: 0 8px 20px rgba(0,0,0,.6);
                    box-shadow: 0 8px 20px rgba(0,0,0,.6);
                    -webkit-transform: skew(8deg) rotate(4deg);
                    -ms-transform: skew(8deg) rotate(4deg);
                    -o-transform: skew(8deg) rotate(4deg);
                    transform: skew(8deg) rotate(4deg);
                }
        /**
         * 满满的计算....变形平行四边形.高度不能满
         *
         * ----------------------------------------------------
         *
         * transform 旋转; skew(xdeg,ydeg)
         * tansform:skew(x-angle,y-angle)  定义沿着X和Y轴的2D倾斜转换
         * 一个参数单一方向2D转换,如X 水平,Y垂直
         *rotate(degree) --- 图形旋转
         */
    </style>

</head>
<body>
    <div class="wrap effect">
        <span>页面内容样式直接取自 地址: http://www.bkjia.com/webzh/1005703.html 如涉及侵权, 请与 1426689530@qq.com 联系, 进行删除</span>
    </div>
    <p>这是曲线阴影效果!!!!</p>
    <ul class="box">
        <li><img src="" alt="测试图片" /></li>
        <li><img src="" alt="测试图片" /></li>
        <li><img src="" alt="测试图片" /></li>
        <li><img src="http://localhost:17001/Projects/ShowBingImages/BowSnow.jpg" alt="测试图片" /></li>
        <li><img src="http://localhost:17001/Projects/ShowBingImages/GreatFountainGeyer.jpg" alt="测试图片" /></li>
        <li><img src="http://localhost:17001/Projects/ShowBingImages/StelvioPass.jpg" alt="测试图片" /></li>
    </ul>
    <p>这是翘边阴影效果!!!!</p>
</body>
</html>
